<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slideshow</title>

    <script type="text/javascript">
    //<![CDATA[

        var currentPhoto = 0;
        var pics = new Array();
        
        window.onload = function() {
            for(var i=0; i<5; i++) {
                pics[i] = new Image();
            }
            pics[0].src = "example9.12_fig01.png";
            pics[1].src = "example9.12_fig02.png";
            pics[2].src = "example9.12_fig03.png";
            pics[3].src = "example9.12_fig04.png";
            pics[4].src = "example9.12_fig05.png";

            document.getElementById("next").onclick = nextPic;
            document.getElementById("prev").onclick = prevPic;
        }

        function changePhoto(photo) {
            document.images[0].src = pics[photo].src;
        }

        function nextPic() {
            currentPhoto++;
            if (currentPhoto < pics.length) {
                changePhoto(currentPhoto);
            }
            else {
                alert("at the end of pics list");
            }
        }

        function prevPic() {
            if (currentPhoto > 0) {
                currentPhoto--;
                changePhoto(currentPhoto);
            }
            else {
                alert("at the beginning of the pic list");
            }
        }
    

    //]]>

    </script>
    
</head>
<body>
    <div id="next"> <span>Next</span></div>   
    <div id="prev"><span>Previous</span></div> 
    <img src="example9.12_fig01.png" />
</body>
</html>
